<script lang="ts">
import {
    ref,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
} from "vue";

export default {
    setup() {
        const count = ref(0);

        const increment = () => {
            count.value++;
        };

        onBeforeMount(() => {
            console.log("setup beforeMount: 组件挂载之前");
        });

        onMounted(() => {
            console.log("setup mounted: 组件挂载完成");
        });

        onBeforeUpdate(() => {
            console.log("setup beforeUpdate: 数据更新之前");
        });

        onUpdated(() => {
            console.log("setup updated: 数据更新完成");
        });

        onBeforeUnmount(() => {
            console.log("setup beforeUnmount: 组件销毁之前");
        });

        onUnmounted(() => {
            console.log("setup unmounted: 组件销毁完成");
        });

        return {
            count,
            increment,
        };
    },
};
</script>

<template>
    <div class="pdL20">
        <div class="mgT20">测试页面路由（setup语法糖）</div>
        <div class="mgT20">count:{{ count }}</div>
        <div class="mgT10">
            <el-button type="info" @click="increment">Increment</el-button>
        </div>
    </div>
</template>

<style scoped></style>
